<template>
  <el-dialog
    title="编辑模板"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    class="dialog-container"
    @close="handlerClose"
  >
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="92px" label-suffix="：">
      <el-form-item label="模板类型" prop="template_type">
        <span>手机端首页模板</span>
      </el-form-item>
      <el-form-item label="模板名称" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
    </el-form>
    <form-footer slot="footer" :loading="confirmLoading" class="dialog-footer" @cancel="handlerClose" @submit="handlerConfirm" />
  </el-dialog>
</template>

<script>
import FormFooter from '@/components/form-footer'

export default {
  name: 'UpdatedDialog',
  components: {
    FormFooter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    template: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      confirmLoading: false,
      formData: {
        title: this.template.title,
        template_type: 'mobile_home'
      },
      rules: {
        template_type: [{ required: true, message: '请选择模板类型', trigger: 'blur' }],
        title: [{ required: true, message: '请输入模板名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 关闭后重置字段
    handlerClose() {
      this.$emit('update:visible', false);
    },
    // 保存活动
    handlerConfirm() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          this.$http.put(
              '/admin/site/template/' + this.template.id + '/edit/title',
              this.formData,
              ({ msg }) => {
                this.$message.success(msg)
                this.confirmLoading = false
                this.handlerClose()
                this.$emit('reload');
              },
              ({ msg }) => {
                this.$message.error(msg)
                this.confirmLoading = false
              }
          )
        }
      })
    }
  }
}
</script>
